/*
 * @Author: shawnxiao
 * @Date: 2021-10-26 11:41:42
 * @LastEditTime: 2021-11-10 15:07:22
 * @FilePath: /gatt-react/src/index/views/Home/components/GattDrag/components/GattDate/components/SecondRow.tsx
 */
import React from 'react'
import {currentDaySizeType} from '..'
import './SecondRow.less'
import {currentLineDayType} from '..'
interface PropsSecondRow{
  allDays:any[]
  days:any[]
  currentDaySize:currentDaySizeType,
  lineBgHeight: number
  currentLineDay: currentLineDayType
}

function SecondRow(props:PropsSecondRow) {
  const {currentDaySize, lineBgHeight, days, allDays} = props
  return (
    <div className="gatt-main-wrap-row">
      {
         currentDaySize.mode === 'halfYear' ? (
          allDays.length && allDays.map((item:any) => {
            return (
              <div
                className="cell halfYear"
                key={`${item.year}-${currentDaySize.mode}`}
                style={{ width: item.days * currentDaySize.value + 'px' }}>
                  <span>上半年</span>
                  <span>下半年</span>
              </div>
            )
          })
         ) : (
          days.length && days.map((day:any, index:number) => {
            switch (currentDaySize.mode){
              /* 按天 */
              case 'day':
                return (<div
                  className="cell"
                  key={`${day.year}-${day.month}-${day.date}-${currentDaySize.mode}`}
                  style={{ width: currentDaySize.value + 'px' }}>
                  <span
                    style={{
                      borderLeft: index === 0 ? 'none' : '1px solid #d7d7d7'
                    }}
                    className={`cell-num ${day.weekday === 0 || day.weekday === 6 ? 'weekday' : ''} ${day.today ? 'today' : ''}`}>
                    {day.today ? '今天' : day.date}
                  </span>
                  <span
                    style={{
                      width: currentDaySize.value + 'px',
                      height:
                        day.weekday === 0 || day.weekday === 6 ? lineBgHeight : '0px'
                    }}
                    className={`cell-bg ${day.weekday === 0 ? 'weekday2' : ''} ${day.weekday === 6 ? 'weekday1' : ''}`}
                  ></span>
                </div>
                )
              /* 按周 */
              case 'week':
                return (<div
                  className="cell"
                  key={`${day.year}-${day.month}-${day.date}-${currentDaySize.mode}`}
                  style={{ width: currentDaySize.value + 'px' }}>
                  <span
                    className={`cell-num weekMode ${day.weekday === 0 || day.weekday === 6 ? 'weekday' : ''}`}>
                    {
                      day.weekday === 1 ? (
                        <span
                          style={{
                            borderLeft: index === 0 ? 'none' : '1px solid #d7d7d7'
                          }}>
                          {day.date}
                        </span>
                      ) : null
                    }
                  </span>
                  <span
                    style={{
                      width: currentDaySize.value + 'px',
                      height:
                        day.weekday === 0 || day.weekday === 6 ? lineBgHeight : '0px'
                    }}
                    className={`cell-bg ${day.weekday === 0 ? 'weekday2' : ''} ${day.weekday === 6 ? 'weekday1' : ''}`}
                  ></span>
                </div>
                )
              /* 按月 */
              case 'month':
                return (<div
                  className="cell"
                  key={`${day.year}-${day.month}-${day.date}-${currentDaySize.mode}`}
                  style={{ width: currentDaySize.value + 'px' }}>
                  <span
                    className={`cell-num weekMode ${day.weekday === 0 || day.weekday === 6 ? 'weekday' : ''}`}>
                    {
                      day.date === 1 ? (
                        <span
                          style={{
                            borderLeft: index === 0 ? 'none' : '1px solid #d7d7d7'
                          }}>
                          {day.date}
                        </span>
                      ) : null
                    }
                  </span>
                  <span
                    style={{
                      width: currentDaySize.value + 'px',
                      height:
                        day.weekday === 0 || day.weekday === 6 ? lineBgHeight : '0px'
                    }}
                    className={`cell-bg ${day.weekday === 0 ? 'weekday2' : ''} ${day.weekday === 6 ? 'weekday1' : ''}`}
                  ></span>
                </div>
                )
              /* 按季度 */
              case 'quarter':
                return (<div
                  className="cell"
                  key={`${day.year}-${day.month}-${day.date}-${currentDaySize.mode}`}
                  style={{ width: currentDaySize.value + 'px' }}>
                  <span
                    className={`cell-num weekMode ${day.weekday === 0 || day.weekday === 6 ? 'weekday' : ''}`}>
                    {
                      day.quarterStart ? (
                        <span
                          style={{
                            borderLeft: index === 0 ? 'none' : '1px solid #d7d7d7'
                          }}>
                          {day.date}
                        </span>
                      ) : null
                    }
                  </span>
                  <span
                    style={{
                      width: currentDaySize.value + 'px',
                      height:
                        day.weekday === 0 || day.weekday === 6 ? lineBgHeight : '0px'
                    }}
                    className={`cell-bg ${day.weekday === 0 ? 'weekday2-noboder' : ''} ${day.weekday === 6 ? 'weekday1-noboder' : ''}`}
                  ></span>
                </div>
                )
              default:
                return (<div
                  className="cell"
                  key={`${day.year}-${day.month}-${day.date}-${currentDaySize.mode}`}
                  style={{ width: currentDaySize.value + 'px' }}>
                  <span
                    style={{
                      borderLeft: index === 0 ? 'none' : '1px solid #d7d7d7'
                    }}
                    className={`cell-num ${day.weekday === 0 || day.weekday === 6 ? 'weekday' : ''}`}>
                    {day.date}
                  </span>
                  <span
                    style={{
                      width: currentDaySize.value + 'px',
                      height:
                        day.weekday === 0 || day.weekday === 6 ? lineBgHeight : '0px'
                    }}
                    className={`cell-bg ${day.weekday === 0 ? 'weekday2' : ''} ${day.weekday === 6 ? 'weekday1' : ''}`}
                  ></span>
              </div>
              )
            }
          })
        )
      }
    </div>
  )
}

export default SecondRow
